import React,{Component,Fragment} from 'react'
import {TransitionGroup,CSSTransition} from 'react-transition-group'
import './App.css'

class Toggle extends Component{
    constructor(props){
        super(props)
        this.state = {
            list:[]
        }
        this.handleAddItem = this.handleAddItem.bind(this);
    }
    render(){
        return(
        <Fragment>
            <TransitionGroup >              
                {
                    this.state.list.map((item,index)=>{
                        return( < CSSTransition 
                                key={index}
                                timeout={1000}//动画执行1秒
                                classNames='fade' //自定义的class名
                                unmountOnExit
                                appear={true} // 为true  渲染的时候就直接执行动画，默认false，
                                onEntered={(el) => {
                                    el.style.color='blue'   //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                                }}
                            >
                                <div>{item}</div>
                            </CSSTransition>
                        )
                    })
                }              
            </TransitionGroup>
            <button onClick={this.handleAddItem}>add item</button>    
            <br /><br /><br />      
        </Fragment>
        )
    }

    handleAddItem(){
        this.setState((prevState)=>{
            return{
                list:[...prevState.list,'item']
            }
        })      
    }

    
}

export default Toggle;